﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
    <link href="../../Scripts/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/l10n.js" type="text/javascript"></script>
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD64Iw9P3MVFJp3axl6NKJ-BucBROh_zrY&sensor=false"></script>
	<script src="../../Scripts/extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/ext-all.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/Plugin/Ext.ux.GMapPanel3.js" type="text/javascript"></script>

    <script src="../../Scripts/extjs/plugin/Ext.ux.grid.CellActions.js" type="text/javascript"></script>

    <script src="../../Scripts/extjs/plugin/Ext.ux.grid.RowActions.js" type="text/javascript"></script>

    <script src="../../Scripts/extjs/plugin/Ext.ux.grid.CheckColumn.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/plugin/Ext.ux.form.CheckboxCombo.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/plugin/Ext.ux.grid.PropertyGrid.js" type="text/javascript"></script>
    <script src="../../Scripts/map.js" type="text/javascript"></script>

    <script src="../../Scripts/menu.js" type="text/javascript"></script>

    <script src="../../Scripts/manage/admin.js" type="text/javascript"></script>

    <script src="../../Scripts/manage/io.js" type="text/javascript"></script>

    <script src="../../Scripts/manage/polygon.js" type="text/javascript"></script>

    <script src="../../Scripts/manage/driver.js" type="text/javascript"></script>

    <script src="../../Scripts/report/alarm.js" type="text/javascript"></script>

<script type="text/javascript"> 

	var eastPanel;
	var westPanel;
	var containerPanel;
	var viewport;
	
	var invDetailPanel;
	var mainTabPanel;
	var detailsPanel;
	var centerPanel;



Ext.onReady(function(){
	google.maps.visualRefresh = true;	
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	
	var map = Sample.ExtGMap.init();   
    
    mainTabPanel = new Ext.Panel({
        region: 'center',
        margins: '0 0 0 0',
		header: false,
		items:[map],
		listeners: {
			resize : function(){
				console.log(2);
			}
		}
        
    });   
   
    invDetailPanel = new Ext.Panel({
        contentEl:'pnl-detail1',
        autoScroll:true,
        border:false
    }); 
    
  
    
    detailsPanel = new Ext.Panel({
        region: 'south',
        height:300,
        margins: '0 0 0 0',
        cmargins: '5 0 0 0',
        title: 'Details',
        split: true,
        layout:'fit',
        collapsible: true,
        items:[invDetailPanel]
    }); 
    
    detailsPanel.hide(); 
	

    westPanel = new Ext.FormPanel({
        region: 'west',
        border:true,
        title: 'Bảng điều khiển',
        margins: '0 0 0 0', 
        cmargins: '0 5 0 0',
        bodyStyle:'padding:5px 5px 5px 5px',
        autoScroll:true,
        labelWidth:100,
        collapsible:true,
        split:true,
        width:340,
        minSize: 140,
        maxSize: 400,
        items:[
          
        ]
    }); 
    
    centerPanel = new Ext.Panel({
        margins: '0 0 0 0', 
        region:'center',
        layout:'border',
        border:false,
        items:[map, detailsPanel]
    });
    
    
    containerPanel = {
        header: false,
        title: 'Menu', 
        tbar: mainToolbar,
        border:false,
        layout:'border',
        items:[
                westPanel,
                centerPanel
        ]
    }  

    

    viewport = new Ext.Viewport({
        layout:'fit',        
        items:[ 
                containerPanel
        ]       
    });
    
    
});

    </script>

</head>
<body>
    <div id="pnl-tab1">Tab 1</div>
    <div id="pnl-tab2">Tab 2</div>
    <div id="pnl-detail1">Detail 1</div>
    
</body>
</html>
